<template>
	<div>
		<a-row>
			<a-card>
				<a-form layout="inline" :model="queryForm">
					<a-form-item label="角色标识">
						<a-input v-model:value="queryForm.roleCode" placeholder="请输入" />
					</a-form-item>
					<a-form-item label="角色名称">
						<a-input v-model:value="queryForm.roleName" placeholder="请输入" />
					</a-form-item>
					<a-form-item  >
						<a-button type="primary" icon="search" @click="formQuery()"></a-button>
						<a-button style="margin-left: 5px" type="" icon="redo" @click="clear()"></a-button>
					</a-form-item>
				</a-form>
			</a-card>
			<a-col :span="24">
				<a-card>
					<div style="margin-bottom: 8px" @click="onAdd">
						<a-button type="primary" icon="plus"> 添加 </a-button>
					</div>
					<!-- 表格 -->
					<a-table :columns="columns" :row-key="(record) => record.roleId" :data-source="data"
						:pagination="pagination" :loading="loading" @change="handleTableChange">
						<span slot="enable" slot-scope="text, record">
							<a-switch @change="onChange2(record)" :checked="record.enable == '0'" checked-children="启用"
								un-checked-children="禁用" />
						</span>
						<template slot="action" slot-scope="text, record">
							<a-button-group>
								<a-button type="link" size="small" @click="onEdit(record)">编辑</a-button>
								<a-button type="link" size="small" @click="onAuth(record)">授权</a-button>
								<a-popconfirm title="确定删除?" @confirm="() => onDelete(record)">
									<a-button type="link" size="small">删除</a-button>
								</a-popconfirm>
							</a-button-group>
						</template>
					</a-table>
				</a-card>
			</a-col>
		</a-row>

		<!-- 添加 编辑弹层 -->
		<a-modal v-model="visible" :title="title" ok-text="确认" cancel-text="取消" @ok="hideModal">
			<a-spin :spinning="spinning">
				<a-form-model :rules="rules" ref="ruleForm" :model="form" :label-col="labelCol"
					:wrapper-col="wrapperCol">
					<a-form-model-item label="角色名" prop="roleName">
						<a-input v-model="form.roleName" placeholder="请输入" />
					</a-form-model-item>
					<a-form-model-item label="角色标识" prop="roleCode">
						<a-input v-model="form.roleCode" placeholder="请输入" />
					</a-form-model-item>
					<a-form-model-item label="是否启用">
						<a-switch default-checked @change="onChange" v-model="enable" checked-children="启用"
							un-checked-children="禁用" />
					</a-form-model-item>
					<a-form-model-item label="排序">
						<a-input-number :min="0" :max="20000000" v-model="form.sort" style="width: 275px"
							placeholder="请输入" />
					</a-form-model-item>
					<a-form-model-item label="描述">
						<a-textarea v-model="form.details" type="text" placeholder="请输入" />
					</a-form-model-item>
				</a-form-model>
			</a-spin>
		</a-modal>
		<!-- 授权弹层 -->
		<a-modal v-model="visible2" title="授权" ok-text="确认" cancel-text="取消" @ok="hideModal2" width='400px'>
			<div style="margin-left: 60px;">
				<a-tree :checkStrictly="true" v-model="checkedKeys" checkable :selectable="true"
					:expanded-keys="expandedKeys" :auto-expand-parent="autoExpandParent" :selected-keys="selectedKeys"
					:tree-data="treeData" @expand="onExpand" @select="onSelect" @check="onCheck" />
			</div>

		</a-modal>
	</div>
</template>

<script>
	import {
		list,
		save,
		update,
		deleteOne,
		getTree,
		selectTree,
		addAuth,
		disable,
		enable,
	} from "@/services/role/role";
	import {
		allRole
	} from "@/services/role/role";
	const columns = [{
			title: "角色名",
			dataIndex: "roleName",
			key: "roleName",
			align: "center",
		},
		{
			title: "角色标识",
			dataIndex: "roleCode",
			key: "roleCode",
			align: "center",
		},
		{
			title: "描述",
			dataIndex: "details",
			key: "details",
			align: "center",
		},
		{
			title: "是否启用",
			dataIndex: "enable",
			key: "enable",
			align: "center",
			scopedSlots: {
				customRender: "enable",
			},
		},
		{
			title: "排序",
			dataIndex: "sort",
			key: "sort",
			align: "center",
		},
		{
			title: "创建时间",
			dataIndex: "createTime",
			key: "createTime",
			align: "center",
		},
		{
			title: "更新时间",
			dataIndex: "updateTime",
			key: "updateTime",
			align: "center",
		},
		{
			title: "操作",
			dataIndex: "operate",
			align: "center",
			scopedSlots: {
				customRender: "action",
			},
		},
	];
	export default {
		name: "Role",
		data() {
			return {
				value: 1,
				data: [],
				// 表格分页参数
				pagination: {
					showQuickJumper: true,
					showTotal: (total) => `共 ${total} 条数据`,
					showSizeChanger: true,
					pageSizeOptions: ["5", "10", "15", "20"],
					total: 0,
				},
				loading: false,
				// 查询参数
				queryForm: {
					page: 1,
					limit: 10,
					roleName: "",
					roleCode: ""
				},
				columns,
				page: 1,
				size: 10,
				roleName: "",
				roleCode: "",
				total: 0,
				visible: false,
				visible2: false,
				title: "添加",
				enable: true,
				// 表单
				form: {
					enable: 0,
				},
				labelCol: {
					span: 4,
				},
				wrapperCol: {
					span: 14,
				},
				//
				spinning: false,
				// 表单验证规则
				rules: {
					roleName: [{
						required: true,
						message: "请输入角色名",
						trigger: "blur",
					}, ],
					roleCode: [{
						required: true,
						message: "请输入角色标识",
						trigger: "blur",
					}, ],
					sex: [{
						required: true,
						message: "请选择性别",
						trigger: "blur",
					}, ],
				},
				// 所有角色
				roles: [],
				roleIds: "",
				defaultValue: [],
				expandedKeys: [],
				autoExpandParent: true,
				checkedKeys: [],
				selectedKeys: [],
				treeData: [],
				halfCheckKeys: [],
				roleId: "",
			};
		},
		computed: {},
		methods: {
			formQuery() {
				this.queryForm.page = 1;
				this.getData()
			},
			clear() {
				this.queryForm.page = 1;
				this.queryForm.limit = 10;
				this.queryForm.roleCode = "";
				this.queryForm.roleName = "";
				this.getData();
			},
			onChange2(record) {
				if (record.enable == "0") {
					disable(record.roleId).then((result) => {
						let res = result.data;
						if (res.code == 0) {
							this.$message.info(res.msg);
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				} else {
					enable(record.roleId).then((result) => {
						let res = result.data;
						if (res.code == 0) {
							this.$message.info(res.msg);
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				}
			},
			onChange(key) {
				console.log(key);
				if (key) {
					this.form.enable = 0;
				} else {
					this.form.enable = 1;
				}
			},
			handleChange(value) {
				console.log(value);
				console.log(value.toString());
				this.form.roleIds = value.toString();
			},
			// 获取所有角色
			getAllRole() {
				allRole().then((result) => {
					let res = result.data;
					for (var i = 0; i < res.data.length; i++) {
						let obj = {
							label: res.data[i].roleName,
							value: res.data[i].roleId,
						};
						this.roles.push(obj);
					}
				});
			},
			// 获取列表数据
			getData() {
				this.loading = true;
				list(this.queryForm).then((res) => {
					let data = res.data;
					console.log(data);
					this.data = data.data;
					this.total = data.count;
					this.pagination.total = data.count;
					this.loading = false;
				});
			},
			showSizeChange(current, size) {
				console.log(current);
				console.log(size);
			},
			// 表格
			handleTableChange(pagination) {
				console.log(pagination);
				this.queryForm.limit = pagination.pageSize;
				this.queryForm.page = pagination.current;
				this.getData();
			},
			// 删除
			onDelete(record) {
				console.log(record);
				deleteOne(record.roleId).then((result) => {
					let res = result.data;
					if (res.code == 0) {
						this.$message.success(res.msg);
						this.getData();
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			// 编辑
			onEdit(record) {
				console.log(record);
				this.visible = true;

				// 要先显示再reset
				this.title = "编辑";
				this.form.roleId = record.roleId;
				this.form.roleName = record.roleName;
				this.form.roleCode = record.roleCode;
				if (record.enable == 0) {
					this.enable = true;
				} else {
					this.enable = false;
				}
				this.form.enable = record.enable;
				this.form.sort = record.sort;
				this.form.details = record.details;
			},
			onAdd() {
				this.title = "添加";
				this.visible = true;
				this.defaultValue = [];
				this.$nextTick(() => {
					this.$refs.ruleForm.resetFields();
					this.form = {};
				});
			},
			getTrees() {
				getTree().then((result) => {
					let res = result.data;
					this.treeData = res.data;
				});
			},
			onAuth(record) {
				this.roleId = record.roleId;
				selectTree(record.roleId).then((result) => {
					this.visible2 = true;
					let res = result.data;
					console.log(res);
					console.log(res.data);
					this.checkedKeys = res.data;
				});
				// this.selectedKeys = ['1']
			},
			// 确认弹框
			hideModal() {
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						this.spinning = true;
						// 提交成功后关闭动画
						if (this.title == "添加") {
							console.log(this.form);
							if (this.enable) {
								this.form.enable = 0;
							} else {
								this.form.enable = 1;
							}
							save(this.form).then((result) => {
								let res = result.data;
								this.spinning = true;
								if (res.code == 0) {
									this.$message.success(res.msg);
									this.spinning = false;
									this.visible = false;
									this.getData();
								} else {
									this.$message.error(res.msg);
									this.spinning = false;
									this.from.name = "";
									this.from.password = "";
								}
							});
						} else {
							console.log("编辑");
							update(this.form).then((result) => {
								let res = result.data;
								this.spinning = true;
								if (res.code == 0) {
									this.$message.success(res.msg);
									this.spinning = false;
									this.visible = false;
									this.getData();
								} else {
									this.$message.error(res.msg);
									this.spinning = false;
									this.from.name = "";
									this.from.password = "";
								}
							});
						}
					} else {
						return false;
					}
				});
			},
			hideModal2() {
				let add = this.checkedKeys;
				console.log(add);
				let ids = add.toString();
				console.log(ids);
				// ids = ids.substring(0, ids.length - 1)
				addAuth(this.roleId, ids).then((result) => {
					let res = result.data;
					if (res.code == 0) {
						this.$message.info(res.msg);
						this.visible2 = false;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			onExpand(expandedKeys, info) {
				console.log("onExpand", expandedKeys);
				console.log("info", info);
				// if not set autoExpandParent to false, if children expanded, parent can not collapse.
				// or, you can remove all expanded children keys.
				this.expandedKeys = expandedKeys;
				this.autoExpandParent = false;
			},
			onCheck(checkedKeys, info) {
				console.log("onCheck", checkedKeys);
				console.log("info ", info);
				console.log("info ", info.halfCheckedKeys);
				let arr = info.checkedNodes;
				let add = [];
				for (var i = 0; i < arr.length; i++) {
					add.push(arr[i].key);
				}

				// this.halfCheckKeys = info.halfCheckedKeys;
				this.checkedKeys = add;
			},
			onSelect(selectedKeys, info) {
				console.log("selectedKeys", selectedKeys);
				console.log("info", info);
				this.selectedKeys = selectedKeys;
			},
		},
		mounted() {
			this.getData();
			this.getAllRole();
			this.getTrees();
		},
	};
</script>

<style>
</style>
